<template>
	<view class="index">
		<view class="header">

		</view>
		<view class="body">
			<swiper class="swiper" :circular="false" :current="current" @change="swiperChange" duration="300">
				<!-- #ifdef H5 -->
				<template v-for="(item, index) in swipers" :key="item">
					<swiper-item>
						<template v-if="loadMap.get(index)">
							<component :is="item.component"> </component>
						</template>
					</swiper-item>
				</template>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<conversation v-if="loadMap.get(0)" />
				<contacts v-if="loadMap.get(1)" />
				<discover v-if="loadMap.get(2)" />
				<mine  v-if="loadMap.get(3)" />
				<!-- #endif -->
			</swiper>
		</view>
		<view class="footer">
			<c_tabbar ref="tabbarRef" @change="tabChange" :current="current" />
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed, reactive, watch, nextTick, markRaw } from 'vue';
import RongIMLib from '../../common/rongCloud/im_init'
import { route } from '@/utils/common';
import { onLoad } from '@dcloudio/uni-app';
import { useChatStore, useUserStore } from '@/store';
import { storeToRefs } from 'pinia'
import { socialApi, userApi } from '@/api';
import c_tabbar from './c_tabbar.vue'
import conversation from './conversation.vue';
import contacts from './contacts.vue';
import discover from './discover.vue';
import mine from './mine.vue';

const userStore = useUserStore();
const { hasLogin, userInfo } = storeToRefs(userStore)
const userId = ref(userInfo.value?.id)
const cardUserId = ref(userInfo.value?.id)
const chatStore = useChatStore()
const current = ref(0)
const tabChange = (index: number) => {
	current.value = index
}
const tabbarRef = ref()
const swiperChange = (e: any) => {
	const { current } = e.detail
	tabbarRef.value.setTabIndex(current)
	loadDetector(current)
}
const swipers = markRaw([
	{
		component: conversation,
	},
	{
		component: contacts,
	},
	{
		component: discover,
	},
	{
		component: mine,
	}
])

const loadMap = reactive(new Map())
loadMap.set(0, true)
watch(current, (newVal, oldVal) => {
	if (newVal !== oldVal) {
		loadDetector(newVal)
	}
})
const loadDetector = (index: number) => {
	loadMap.set(index, true)
}

//获取到用户融云信息-- 并且创建一码人脉用户
async function getUserDetailInfo() {
  const { data } = await socialApi.userDetailInfo({
    id: userId.value,
    userId: userId.value,
    detail: true
  })
  console.log('融云创建用户成功',data);
}

onLoad(async (options: any) => {
	if(options?.tab) {
		current.value =  Math.round(options.tab)
	}
	await getUserDetailInfo()
})
</script>

<style lang="scss" scoped>
.index {
	position: relative;
	min-height: 100%;

	.body {
		.swiper {
			height: calc(100vh - 110rpx);
		}
	}

	.footer {
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 999;
	}
}

.slide-fade-enter-active {
	transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
	transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
	transform: translateX(20px);
	opacity: 0;
}
</style>
